<template>
	<view class="limit-irrigation">
		<intel-irri-model-header class="header" name="阈值灌溉" :state="state"></intel-irri-model-header>
		<view class="uni-flex uni-row param-station">
			<text class="text">选择站点</text>
			<!-- <select name="" id="" class="combox">
				<template v-for="station in stations">
					<option :value="station">{{station}}</option>
				</template>
			</select> -->
			<text class="combox" @click="selectStation">
				站点1
			</text>
			<add-station :show="isSelect" @close="dialogClose" @save="selectStationSave" @back="selectStationBack"></add-station>
		</view>
		<view class="uni-flex uni-row param-limit">
			<text class="text">阈值设定</text>
			<view class="limit">
				<view class="uni-flex uni-row single">
					上限 <input class="value" type="text" value="" placeholder="__________" /> %RH
				</view>
				<view class="uni-flex uni-row single">
					下限 <input class="value" type="text" value="" placeholder="__________" /> %RH
				</view>
			</view>
		</view>
		<button class="start" type="default" @click="start">启动</button>
	</view>
</template>

<script>
	import intelIrriModelHeader from './intel-irri-model-header.vue'
	import addStation from './add-station.vue'
	export default {
		data() {
			return {
				isSelect: false,
				data:0,
				stations:[1,2,3,4,6,7,8,9,10]
			}
		},
		methods:{
			start(){
				this.$emit('start')
			},
			selectStation(){
				this.isSelect = true;
			},
			selectStationSave(devices){
				// console.log(this.isSelect, devices)
				// this.$emit('selectStationSave')
				this.isSelect = false;
			},
			selectStationBack(){
				// console.log(this.isSelect)
				this.isSelect = false;
			},
			dialogClose(){
				// console.log(this.isSelect)
				this.isSelect = false;
			}
		},
		props:{
			state: {
				type: Boolean,
				required: true
			},
			// stations:{
			// 	type: Array,
			// 	default() {
			// 		return [
			// 			1,2,3,4,6,7,8,9,10
			// 		]
			// 	}
			// }
		},
		components:{
			intelIrriModelHeader,
			addStation
		}
	}
</script>

<style lang="scss" scoped>
.limit-irrigation{
	// width: 612.94rpx;
	// height: 376.47rpx;
	background: #D4EEEA;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 11.76rpx 0 16.47rpx 21.17rpx;
	
	.header{}
	.param-station{
		margin-top: 37.64rpx;
		justify-content: space-around;
		align-items: center;
		.combox{
			width: 341.17rpx;
			height: 62.35rpx;
			background: #84A6A1;
			border-radius: 11.76rpx;
			
			line-height: 62.35rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}
	.param-limit{
		margin-top: 22.35rpx;
		justify-content: space-around;
		align-items: center;
		.limit{
			width: 341.17rpx;
			height: 123.52rpx;
			background: #84A6A1;
			border-radius: 11.76rpx;
			.single{
				height: 61.17rpx;
				line-height: 61.17rpx;
				justify-content: space-around;
				.value{
					// margin: 0 22.35rpx;
					width: 129.41rpx;
				}
			}
		}
	}
	.text{
		font-size: 21.17rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #1D786C;
	}
	.start{
		margin-top: 21.17rpx;
		width: 135.29rpx;
		background: #1D786C;
		border-radius: 11.76rpx;
		
		font-size: 29.41rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #FFFFFF;
	}
}
</style>